<?php
  /**
  * Elgg c2i view page
  *
  * @author Pole TICE
  * @copyright TICE 2009
  * @link http://el-portfolio.uvsq.fr/
  */
  //some required params
  $domaine = ($vars['entity']->domaine != '') ? '?domaine='.$vars['entity']->domaine : '?domaine=all';
  $url=$vars['url'];
?>
<script type="text/javascript" src="<?php echo $vars['url']; ?>mod/c2i/views/default/c2i/js/cycle.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
    var h = 0;
    $.getJSON('<?php echo $vars['url']; ?>mod/c2i/api.php<?php echo $domaine ?>', function(data) {
      $.each(data.items, function(i,item) {
        $('<div/>')
          .appendTo('#questions')
          .html('<h3><img src="<?php echo $vars['url']; ?>mod/c2i/graphics/niveau.gif"/> Domaine '+item.domaine+'</h3><h4><img src="<?php echo $vars['url']; ?>mod/c2i/graphics/fleche.gif"/>  ' + item.titre + '</h4><div id="q_container_'+i+'" class="q_cont"><div class="reponses" id="question_'+i+'"><div class="r" id="r_container_'+i+'"></div></div><div id="info_'+i+'" class="hiddenInfo"></div></div>');
        $('<p/>')
          .appendTo('#info_'+i)
          .html('<p><b>Auteur : </b><a href="mailto:'+item.mail+'">'+item.auteur+'</a></p><p><b>Compétence : </b>'+item.aptitude+'</p><p><b>Difficulté : </b>'+item.difficulte+'</p><p><b>Date de création : </b>'+item.date+'</p><div class="retour"><h4><a href="#" id="retour_btn_'+ i +'"><img src="<?php echo $vars['url']; ?>mod/c2i/graphics/retour.gif"/>Retour</a></h4></div>');
        $.each(item.answers, function(j,answer) {
          $('<div class="divrep"/>').appendTo('#r_container_'+i).html('<div class="rep">'+answer.reponse +'</div><div class="box"><input type="checkbox" value="'+answer.id+'" /></div>');
          $('#question_'+i+' input:checkbox[value='+answer.id+']').data('result', answer.result).data('reponse', answer.reponse);
        });
        $('#r_container_'+i)
          .append('<div class="clear"></div>');
        $('#question_'+i)
          .append('<div class="ok"><input type="submit" value="OK" /></div><div class="infos"><h4><a href="#" id="info_btn_'+ i +'">Plus d\'infos<img src="<?php echo $vars['url']; ?>mod/c2i/graphics/plusInfos.gif"/></a></h4></div><div class="clear"></div>');
        if (i==0) {
          h = $('#questions div:first h3').height() + $('#questions div:first h4').height() + $('#q_container_0').height();
          console.log($('#questions div:first h3').height());
          console.log($('#questions div:first h4').height());
          console.log($('#q_container_0').height());
          console.log(i);
        }
        $('#question_'+i+' input:submit').click(function() {
          var error = false;
          var bonnesReponses = [];
          var k = 0;
          $('#question_'+i+' input:checkbox').each(function(z,n){
            if($(this).data('result') === true) {
              bonnesReponses[k] = $(this).data('reponse');
              k = k+1;
            }
            if($(this).data('result') == false && $(this).is(':checked') == true) {
              error = true;
            }
            if($(this).data('result') == true && $(this).is(':checked') == false) {
              error = true;
            }
          });
          $('#question_'+i).fadeOut('slow', function() {
              $('#question_'+i)
                .html('<div id="resultat_'+ i +'" class="result"></div>')
            if(error == false) {
              $('#resultat_'+i)
                .append('<img src="<?php echo $vars['url']; ?>mod/c2i/graphics/vrai.gif"/>');
            }
            else {
              $('#resultat_'+i)
                .append('<img src="<?php echo $vars['url']; ?>mod/c2i/graphics/faux.gif"/>');
            }
            validation(i, error, bonnesReponses);
          }).fadeIn('slow');
          return false;
        });
        $('#retour_btn_'+ i).click(function() {
          info(i);
          return false;
        });
        $('#info_btn_'+ i).click(function() {
          info(i);
          return false;
        });
      });
      $('#questions').cycle
      ({
        fx:             'fade',
        speed:          'slow',
        timeout:        0,
        next:           '#next',
        autostop:       true,
        prevNextClick:  function(isNext, zeroBasedSlideIndex, slideElement) {
          setH(slideElement);
        },
        after :         function(currSlideElement, nextSlideElement, options, forwardFlag) {
          adaptHeight(nextSlideElement);
        }
      });
      $('.hiddenInfo').hide();
    });
    setH = function(elem) {
      h = $(elem).height();
    }
    adaptHeight = function(slideElement) {
      $('#questions').height(h);
      $(slideElement).height(h);
    }
    info = function(zeroBasedSlideIndex) {
      $('#question_' + zeroBasedSlideIndex).toggle();
      $('#info_' + zeroBasedSlideIndex).toggle();
    }
		validation = function(i, error, bonnesReponses) {
			var rep = '';
			if(error == true) {
				if(bonnesReponses.length>1) {
					rep = ' Faux ! Les bonnes réponses étaient :<br />';
					$.each(bonnesReponses, function(j,n) {
						rep += n+'<br />';
					});
				}
				else {
					rep = ' Faux ! La bonne réponse était :<br />' + bonnesReponses[0];
				}
			}
			else {
				if(bonnesReponses.length>1) {
					rep = ' Bravo ! Ce sont les bonnes réponses.<br />';
				}
				else {
					rep = ' Bravo ! C\'est la bonne réponse.<br />';
				}
			}
			$('#resultat_'+i).append(rep);
		}
  });
</script>
<style type="text/css">
  #questions { 
    width: 100%;
    padding:0; 
    margin:1px 1px 5px 1px;
    background-color: #FFF;
  }
  #questions h3 {
    text-align: right;
    color: #CC6600;
    background-color: #FFF;
    }
  #questions h4 {
    margin-bottom: 15px;
    margin-right: 3px;
    color: #CC6600;
    background-color: #FFF;
  }
  #questions img {
    vertical-align: middle;
  }
  .r {
    background-color: #fafaf6;
    border: 1px dotted #ccc;
    width: 99%;	
  }
  .hiddenInfo {
    background-color: #fafaf6;
    border: 1px dotted #ccc;
    width: 100%;
    padding : 2px 2px 1px 2px;
  }
  .divrep {
    width: 280px;	
  }
  .rep {
    float: left;
    width: 85%;
    clear: left;
    padding: 5px 5px 15px 5px;
  }
  .box {
    float: left;
    width: 10%;
  }
  .ok {
    float: left;
    clear: left;
    margin-left: 45% ;
    margin-top: 1%;
    background-color: #FFF;
  }
  .result {
    background-color: #fafaf6;
    border: 1px dotted #ccc;
    width: 100%;
    margin : 1px 10px 5px 1px;
  }
  .infos {
    margin-top: 1%;
    float: left;
    margin-left: 10%;
    background-color: #FFF;
  }
  .infos a:visited, .infos a:hover, .infos a:link{
    color: #999966;
  }
  .retour img{
    vertical-align: baseline;
    padding-right : 5px;
  }
  .retour {
    margin-top: 1%;
    float: left;
    margin-left: 2%;
    background-color: #FFF;
  }
  .retour a:visited,.retour a:hover,.retour a:link{
    color: #999966;
  }
  .infos img{
    vertical-align: baseline;
  }
  .clear {
    clear: both;
  }
</style>
<form action="#" name="quizz" id="quizz">
  <div id="questions"></div>
  <div id="c2iNav" align="center">
    <a id="next" href="#">
      <img src="<?php echo $vars['url']; ?>mod/c2i/graphics/btnSuivant.gif" />
    </a>
  </div>
</form>